<template>
  <div class="container">
    <h2>App组件</h2>
    <button @click="getRight">获取子组件</button>
    <my-left></my-left>
    <my-right ref="myright"></my-right>
  </div>
</template>

<script>
import MyLeft from './components/MyLeft.vue'
import MyRight from './components/MyRight.vue'
export default {
  components: { MyLeft, MyRight },
  methods: {
    getRight () {
      // 通过组件上的ref，可以得到组件的实例对象
      // console.log(this.$refs.myright)
      // 找到子组件之后，可以调用子组件的方法，也可以使用子组件的数据、计算属性
      // 调用子组件的方法
      this.$refs.myright.show()
    }
  }
}
</script>
